<template>
  <el-dialog
    width="30%"
    append-to-body
    :visible.sync="visible"
    title="发起投诉"
  >
    <base-form ref="base-form" :form-items="formItems" :rules="rules">
      <template #isAnonymous_append>
        <span
          class="anonymous-tip"
        >选择匿名投诉，系统不会记录您的账户信息</span>
      </template>
    </base-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import BaseForm from '@/components/BaseForm'
import { getFormItems, getRules } from './config'
export default {
  components: {
    BaseForm
  },
  data() {
    return {
      visible: false,
      formItems: getFormItems(),
      rules: getRules()
    }
  },
  computed: {},
  watch: {
    visible(newVal) {
      this.$nextTick(async() => {
        const baseForm = this.$refs['base-form']
        console.log(baseForm)
        if (newVal) {
          const { result } = await this.dataFactory()
          baseForm.updateOptions('type', result)
        } else {
          baseForm.resetForm()
          const form = baseForm.getRef()
          form.clearValidate()
        }
      })
    }
  },
  methods: {
    toggle() {
      this.visible = !this.visible
    },
    handleSubmit() {
      const baseForm = this.$refs['base-form']
      baseForm.submit(function(valid, form) {
        if (valid) {
          console.log('提交表单', form)
        }
      }, false)
    },

    dataFactory() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      return new Promise((resolve) => {
        this.timer = setTimeout(() => {
          resolve({
            result: [
              {
                label: '美食/餐厅线上活动', value: 1
              },
              {
                label: '地推活动', value: 2
              },
              {
                label: '线下主题活动', value: 3
              }
            ]
          })
        }, 300)
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.anonymous-tip {
  color: #bfbfbf;
  margin-left: 20px;
}
</style>
